import React, { useEffect, useState } from 'react';
import Header from '../../../../component/Serve/Header/Header';
import './DateServicePack.scss';
import { Select, Form, Input, Button, Empty } from 'antd';
import { getServePack, searchServePack } from '../../../../api/Service'
import { useNavigate } from 'react-router-dom';
interface Props {

}
function DataServicePack(props: Props) {
    var navigate = useNavigate();
    const { Search } = Input;
    var [alldata, setallData] = useState<any>([]);//页面数据
    var [data, setData] = useState<any>([]);//页面数据
    //挂载期
    useEffect(() => {
        getlist()
    }, [])
    //获取数据函数
    var getlist = async () => {
        var allData = await getServePack()
        setallData(allData.data)
    }
    //监听数据变化
    useEffect(() => {
        var res = alldata.filter((item: any) => item.packType == '初级包')
        var res1 = alldata.filter((item: any) => item.packType == "中级包")
        var res2 = alldata.filter((item: any) => item.packType == "高级包")
        var res3 = alldata.filter((item: any) => item.packType == "定制包")
        setData([{ name: "初级包", data: res }, { name: "中级包", data: res1 }, { name: "高级包", data: res2 }, { name: "定制包", data: res3 }])
    }, [alldata])
    //点击搜索
    const onSearch = async (value: string) => {
        var res = await searchServePack({ packName_like: value })
        console.log(res);

        setallData(res.data)
    }
    //点击每个包
    var goDetail = (item: any) => {
        navigate("/index/datas-servicedetail-pack?packid=" + item.id)
    }
    //下拉框筛选
    var onStatusChange = async (value: any) => {
        var res = await searchServePack({ packStatus_like: value })
        setallData(res.data)
    }
    return (
        <div className='data-service-pack'>
            <div className="main">
                <Header txt="服务包管理" />
                <div className="inputbox">
                    <Form style={{ maxWidth: 600 }}>
                        <Form.Item
                            label="服务包状态"
                        >
                            <Select
                                placeholder="请选择"
                                allowClear
                                onChange={(value) => { onStatusChange(value) }}
                            >
                                <Select.Option value="待审核">审核中</Select.Option>
                                <Select.Option value="已启用">已启用</Select.Option>
                                <Select.Option value="已停用">已停用</Select.Option>
                                <Select.Option value="已驳回">已驳回</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Search
                                placeholder="请输入搜索关键字"
                                enterButton="搜索"
                                onSearch={onSearch}
                            />
                        </Form.Item>
                    </Form>
                    <Button type="primary" onClick={() => { navigate("/index/datas-addservice-pack") }}>新增服务包</Button>
                </div>

                <div className="pack">
                    {
                        data &&
                        data.map((item: any, index: number) => {
                            return (
                                <div key={index}>
                                    <h3>{item.name}</h3>
                                    <div className="itembox">
                                        {
                                            item.data &&
                                            <>
                                                {
                                                    item.data.length==0 ?
                                                        <Empty /> :
                                                        <>
                                                            {
                                                                item.data.map((item: any, index: any) => {
                                                                    return (
                                                                        <div className="item" key={index} onClick={() => { goDetail(item) }}>
                                                                            <img src={item.img} alt="" />
                                                                            <div className="itemright">
                                                                                <h5>{item.packName}</h5>
                                                                                <p>服务对象:{item.packUser}</p>
                                                                                <div className="spanbox">
                                                                                    <span>{item.packTags}</span>
                                                                                </div>
                                                                            </div>
                                                                            {item.packStatus == "待审核" && <div className="status" style={{ background: "#3DD4A7" }}>{item.packStatus}</div>}
                                                                            {item.packStatus == "已启用" && <div className="status" style={{ background: "#1677FF" }}>使用中</div>}
                                                                            {item.packStatus == "已停用" && <div className="status" style={{ background: "rgba(253, 219, 120, 1)" }}>{item.packStatus}</div>}
                                                                            {item.packStatus == "已驳回" && <div className="status" style={{ background: "#FF4D4F" }}>{item.packStatus}</div>}
                                                                        </div>
                                                                    )
                                                                })
                                                            }
                                                        </>
                                                }
                                            </>


                                        }
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        </div>
    );
}

export default DataServicePack;